<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('查看博客')"/>
    <th:block th:include="include :: typo-css"/>
    <th:block th:include="include :: semantic-css"/>

    <style>
        @media screen and (max-width: 800px) {
            .m-mobile-show {
                border-top-width: 0px !important;
                border-left-width: 0px !important;
                margin-right: 0px !important;
                padding-left: 0px !important;;
                padding-right: 0px !important;;
                border-right-width: 0px !important;;
                border-bottom-width: 0px !important;;
            }
        }

        /* 默认黑色字体 */
        .attachment-link {
            color: black;
            text-decoration: none; /* 可选，去掉下划线 */
        }

        /* 鼠标悬停时变为蓝色 */
        .attachment-link:hover {
            color: blue;
        }

    </style>

</head>
<body class="white-bg">

<!--<div class="m-container m-padded-td-big m-box-relative">-->
<div class="wrapper wrapper-content animated fadeInRight ibox-content">

    <!--    内容-->
    <div class="ui  attached padded segment m-mobile-show">

        <!--博客标题-->
        <h2 class="ui aligned center header" th:utext="${boardNote.noteTitle}"></h2> <br>

        <!--博客内容 -->
        <div id="content" class="typo typo-selection js-toc-content  m-padded-rl m-padded-tb-large "
             th:utext="${boardNote.noteContent}">
        </div>

        <div class="ui horizontal divider">end</div>

        <!-- 展示附件 -->
        <div th:if="${not #lists.isEmpty(boardNote.attachmentList)}" style="margin-top: 1em;">
            <h4 style="font-size: 1.2em; color: #333; font-weight: bold;">附件：</h4>
            <div style="margin-top: 0.5em; display: flex; flex-direction: column; gap: 0.5em;">
                <!-- 遍历附件列表 -->
                <div th:each="attachment : ${boardNote.attachmentList}"
                     style="display: flex; justify-content: space-between; align-items: center; padding: 0.5em 0; border-bottom: 1px solid #ddd;">
                    <!-- 文件名作为普通链接 -->
<!--                    <a th:href="@{${attachment.urlPath}}"-->
<!--                       th:text="${attachment.attachmentName}"-->
<!--                       title="点击查看附件"-->
<!--                       th:attr="${#lists.contains(#strings.split('.jpg,.png,.gif,.pdf,.docx', ','), #strings.substringAfterLast(attachment.urlPath, '.')) ? 'target=_blank' : ''}"-->
<!--                       class="attachment-link">-->
<!--                    </a>-->
                    <a th:href="@{${attachment.urlPath}}"
                       th:text="${attachment.attachmentName}"
                       title="点击查看附件"
                       th:attr="target=${#strings.endsWith(attachment.urlPath, '.txt') or #strings.endsWith(attachment.urlPath, '.pdf') ? '' : '_blank'}"

                       class="attachment-link">
                    </a>
                    <!-- 下载按钮 -->
                    <a th:href="@{${attachment.urlPath}}"
                       th:download="${attachment.attachmentName}"
                       th:title="点击下载附件"
                       style="color: #1f77d4; text-decoration: none; font-size: 1em; padding: 0.3em 0.8em; display: inline-flex; align-items: center;">
                        <i class="download icon" style="margin-right: 0.5em;"></i>
                        下载
                    </a>
                </div>
            </div>
        </div>





    </div>

    <!--博客信息 -->
    <div class="ui bottom attached positive message">
        <div class="ui middle aligned grid">
            <div class="eleven wide column">
                <ui class="list">
                    <li>一粒麦子欢迎您</li>
                    <li>发表/更新时间：<span
                            th:text="${#dates.format(boardNote.updateTime,'yyyy-MM-dd HH:mm:ss')}"></span>
                    </li>
                    <li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
                    <li>公众号转载：请在文末添加作者公众号二维码</li>
                </ui>
            </div>
            <div class="five wide column">
                <img src="/img/wechat.png" alt=""
                     class="ui right floated rounded bordered image" style="width:100px"/>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: semantic-js"/>


</body>
</html>
